<template>
  <div class="switcher" :data-text="pickedText">
    <div
      v-for="(option, i) in options"
      :key="option[optionValue]"
      class="option font-size-12 font-weight-500 line-height-120 pointer"
      :class="{ selected: options.findIndex((o) => o[optionValue] === modelValue) === i }"
      @click="$emit('update:modelValue', option[optionValue])"
    >
      {{ $t(option[optionLabel]) }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { $t } from '@/i18n'

const props = defineProps({
  modelValue: { type: Number, required: true },
  options: { type: Array, required: true },
  optionLabel: { type: String, default: 'label' },
  optionValue: { type: String, default: 'value' },
})

defineEmits(['update:modelValue'])

const pickedText = computed(() => {
  const pickedOption = props.options.find((o) => o[props.optionValue] === props.modelValue)
  if (pickedOption) {
    return $t(pickedOption[props.optionLabel])
  }
  return '---'
})
</script>

<style lang="scss" scoped>
.switcher {
  height: 1.25rem;
  border: 0.0625rem solid #fff;
  border-radius: 1rem;
  background-color: rgba(24, 25, 37, 0.4);
  position: relative;
  display: flex;

  .option {
    height: calc(100% + 0.125rem);
    padding: 0.125rem 0.75rem;
    border: 0.0625rem solid transparent;
    transform: translateY(-0.0625rem);

    &:first-child {
      transform: translate(-0.0625rem, -0.0625rem);
    }
    &:last-child {
      transform: translate(0.0625rem, -0.0625rem);
    }

    &.selected {
      border-color: #fff;
      border-radius: inherit;
      background-color: rgba(222, 222, 222, 0.52);
    }
  }
}
</style>
